<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .pdd-head-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 80px;
            z-index: 999;
            background-color: rgba(61, 51, 51, 0.8);
            border-bottom: 2px solid #62eaf5;

        }

        .head {
            position: relative;
            width: 1000px;
            left: 280px;
            top: 17px;

        }

        .menu a:hover .banxin {
            color: #fff;
        }

        .menu a:hover {
            color: #fff;
        }

        .item {
            display: inline-block;
            padding-left: 45px;

        }


        .english {
            text-decoration: none;
            color: rgb(1, 171, 171);
            font-style: italic;
            font-size: 4px;
            font-weight: 600;
        }

        .banxin {
            color: aqua;
            font-style: italic;
            font-size: large;
            font-weight: 600;
        }

        .Grow {
            position: absolute;
            right: 300px;
            top: 21px;
            text-decoration: none;
            color: aqua;
            font-size: medium;
            font-weight: 500;
        }

        .grow {
            text-decoration: none;
            color: aqua;
            font-size: medium;
            font-weight: 800;

        }

        .Through {
            position: absolute;
            right: 200px;
            top: 21px;
            text-decoration: none;
            color: aqua;
            font-size: medium;
            font-weight: 800;

        }

        .through {
            text-decoration: none;
            color: aqua;
            font-size: medium;
            font-weight: 800;


        }

        .Through a:hover {

            color: #fff;
        }

        .Grow a:hover {
            color: #fff;
        }

        .box1 {

            position: relative;
            background: url("https://webstatic.mihoyo.com/upload/static-resource/2023/02/14/869c3ab984466756ee7711bdfadb0a3a_2445070554512252169.jpg");
            background-repeat: no-repeat;
            padding-bottom: 1350px;
            background-position: 50% 0;

        }

        .pv {
            position: absolute;
            left: 210px;
            top: 654px;
            border: #62eaf5;
            border-radius: 12px;
        }

        .pv img {
            width: 310px;
        }

        .download-box {
            position: absolute;
            background: rgba(255, 255, 255, .85);
            border: 51px solid rgba(255, 255, 255, .2);
            width: 450px;
            height: 70px;
            left: 530px;
            top: 650px;


        }

        .qr {
            position: absolute;

            background: url();
            background-repeat: no-repeat;
            width: 300px;
            height: 310px;
            top: -35px;
            left: -40px;
            padding-bottom: 10px;
            background-size: 200px;

        }

        .qrimg {
            position: absolute;
            width: 120px;
            top: 22px;
            left: 20px;
        }

        .moni {
            position: absolute;
            height: 25px;
            left: 160px;
            top: 25px;
        }

        .download-btns {
            position: absolute;
            left: 200px;
            top: 10px;

        }

        .download-btns img {
            width: 200px;
        }

        .anzhuo {
            position: absolute;
            background: rgb(98, 196, 0);
            left: 200px;
            top: 90px;
            padding-right: 25px;
            width: 175px;
            height: 50px;
        }

        .anzhuo a {
            text-decoration: none;
            color: #fff;

        }

        .pcdownload img {
            height: 120px;
        }

        .pcdownload {
            height: 20px;
            position: absolute;
            left: 410px;
            top: 15px;
        }

        .limit img {
            height: 180px;

        }

        .limit {
            position: absolute;
            right: -400px;
            top: -16px;
        }

        .Logo {
            position: absolute;
            width: 200px;
            right: 220px;
            top: 92px;
        }

        .news {
            background: url(https://www.bh3.com/_nuxt/img/honenewsbg.172c64b.png) no-repeat;
            width: 1300px;
            height: 350px;
            position: relative;
            display: flex;
            left: -465px;
            top: 140px;
            display: flex;
            justify-content: space-between;
            background-size: 1420px 500px;

        }

        .slid {
            position: absolute;
            height: 100px;
            left: 25px;
            top: 28px;



        }

        .slid img {
            height: 250px;
            border: 5px solid aqua;
            border-radius: 5px;
        }

        .coloum {

            position: absolute;
            left: 630px;
            top: 30px;

        }

        .cates {
            width: 550px;
            display: flex;
            justify-content: space-between;
        }


        .cate a {
            text-decoration: none;
            color: #fff;
            background: #0097de;
            font-weight: 600;
            display: inline-block;
            font-size: 30px;
            border: 10px solid #0097de;
            border-radius: 5px;

        }

        .activ a {
            background-color: #fff;
            color: #0097de;
            border: 10px solid #fff;
        }

        .roller {
            position: absolute;
            top: 420px;
            left: -210px;
        }

        .annoucement {

            width: 600px;



        }

        .lines {
            text-decoration: none;
            color: #fff;
            font-size: 20px;
            display: flex;
            width: 780px;
            line-height: 50px;

        }

        .lines:hover {
            color: yellow;
        }

        .tasks {

            text-align: center;
            margin-right: auto;


        }



        .divide {
            background-color: #fff;
            height: 1px;
            color: #fff;
            width: 650px;
            line-height: 1px;
        }

        .lookall {
            position: absolute;
            right: -350px;
            top: 440px;
            border: 1px solid yellow;
            border-radius: 8px;

        }

        .lookall a:hover {
            background-color: #fff;
        }

        .box2 {

            position: relative;
            background: url(https://www.bh3.com/_nuxt/img/middlebg.10793f4.jpg);
            background-repeat: no-repeat;
            

        }

        .picture {
            position: relative;
            height: 970px;
            left: 110px;
            top: -10px;
            


        }

        .box2-1 {
            position: absolute;
            right: 140px;
            top: 150px;

        }



        .NAME {
            color: #fff;
            font-size: 350%;
            font-weight: 700;
            font-style: italic;
            line-height: 30px;

        }

        .code {
            color: aqua;
            font-size: 200%;
            font-weight: 600;
            font-style: italic;
            text-align: right;
            line-height: 85px;

        }

        .introduce {

            color: #fff;
            font-size: 125%;
            right: 200px;
            line-height: 50px;

        }

        .video {
            position: relative;
            right: -180px;
            top: -140px;

        }

        .skills {
            position: absolute;
            width: 450px;
            right: 100px;
            top: 450px;
        }

        .LADYGOD {

            position: absolute;
            right: 120px;
            top: 610px;
        }

        .name {
            position: absolute;
            right: 140px;
            color: #fff;
            font-size: medium;
            font-style: italic;
            top: 740px;

            letter-spacing: 10px;
        }

        .search {
            position: absolute;
            right: 120px;
            top: 800px;
            height: 10px;
            border-bottom: 35px solid yellow;
            border-radius: 5px;
            
        }

        .search a:hover {
            background-color: #fff
        }
        .box3 {
            position: relative;
            background-image: url(https://www.bh3.com/_nuxt/img/bottombg.9acd5ae.jpg);
            background-repeat: no-repeat;
            
        }

        .yayi {
            position: relative;
            left: 830px;
            top: 6px;
        }

        .contract-wrap {
            width: 780px;
            height: 460px;
            border: 2px solid #269ad1;
            border-radius: 4px;
            padding: 6px;
            margin: 0 auto;
            position: relative;
            left: -400px;
            top: -475px;
            background: #2e448f;

        }

        .tubiao {
            display: flex;
            background: #269ad1;

        }

        .social-item {
            text-decoration: none;
            display: inline-block;
            font-weight: 500;
            font-size: larger;
            color: #fff;
            justify-content: space-between;
        }

        .weibo {
            padding-left: 15px;
        }

        .qqtitle {
            position: absolute;
            top: 350px;
            left: 30px;

        }

        .hanzi {
            color: #fff;
            font-style: italic;
            font-size: large;
        }

        .line {
            color: cyan;
        }

        .number1 {
            position: absolute;
            left: 30px;
            top: 400px;
            color: #fff;
            font-size: smaller;
            font-weight: 100px;
            font-style: italic;
            line-height: 30px;
        }

        .number2 {
            position: absolute;
            left: 315px;
            top: 400px;
            color: #fff;
            font-size: smaller;
            font-weight: 100;
            font-style: italic;
            line-height: 30px;
        }

        .number3 {
            position: absolute;
            left: 315px;
            top: 400px;
            color: #fff;
            font-size: smaller;
            font-weight: 100;
            font-style: italic;
            line-height: 30px;
            padding-left: 200px;

        }
        .bot {
        color: aliceblue;
        display: flex;
        width: 100%;
        height: 300px;
        background-color: black;
        position: fixed;
        top: 2950px;
        left: 0;
        flex-wrap: wrap;
        position: absolute;
        padding: 30px 0;
        padding-bottom: 170px;
    }
    .bot-p{
        position: relative;
        flex-wrap: wrap;
        display: flex;
        font-weight: bold;
        text-align: center;
        margin-left: 790px;
        display: inline-block;
        font-size: small;
        cursor: pointer;
    }
    .bot-p-a{
        font-size: large;
       margin-left: auto;
    }
     .bot-ph{
       position: relative;
       width: 300px;
       display: flex;
       display: inline-block;
       cursor: pointer;
    }
       
    </style>
</head>

<body>
    <div class="pdd-head-wrapper">
        <div class="head">
            <ul class="menu">
                <li class="item">
                    <a class="english" href="https://www.bh3.com/">
                        <div class="banxin">官网首页</div>
                        <div>HOME</div>
                    </a>
                </li>
                <li class="item">
                    <a class="english" href="https://tl345gffgbb830hhj5.gitee.io/hpeng">
                        <div class="banxin">作战咨询</div>
                        <div>NEWS</div>
                    </a>
                </li>
                <li class="item">
                    <a class="english" href="https://tl345gffgbb830hhj5.gitee.io/z-tao-i">
                        <div class="banxin">女武神</div>
                        <div>
                            VALKYRIES
                        </div>
                    </a>
                </li>
                <li class="item">
                    <a class="english" href="https://tl345gffgbb830hhj5.gitee.io/sirius-i">
                        <div class="banxin">动画壁纸</div>
                        <div>WALLPAPERS
                        </div>
                    </a>
                </li>
                <li class="item">
                    <a class="english" href="https://mihoyo.tmall.com/" target="_blank">
                        <div class="banxin">周边商城</div>
                        <div>MERCH
                        </div>
                    </a>
                </li>
                <li class="item">
                    <a class="english" href="https://www.miyoushe.com/bh3/" target="_blank">
                        <div class="banxin">官方社区</div>
                        <div>COMMUNITY
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="Grow">
            <a href="https://jiazhang.mihoyo.com/index.html#/" class="grow" target="_blank">成长关爱系统</a>
        </div>
        <div class="Through">
            <a href="https://user.mihoyo.com/#/login/captcha" class="through" target="_blank">通行证</a>
        </div>
    </div>
    <div class="box1">
        <img class="Logo" src="./logo.png">
        <div class="pv">
            <a href="xxx"><img src="./shipin.jpg"></a>
        </div>
        <div class="download-box">
            <div class="qr">
                <img class="qrimg"
                    src="https://uploadstatic.mihoyo.com/bh3/upload/officialsites/201908/qrcode_1566960902_4545.png"
                    alt="米哈游">
                <div class="moni">
                    <a href="https://api-takumi.mihoyo.com/event/download_porter/link/bh3_cn/bh3/pc_mumu"
                        target="_blank"><img src="./moni.jpg"></a>
                </div>
                <div class="download-btns">
                    <a href="https://l.taptap.com/uoTVkvZ1" target="_blank" class="tap-tap">
                        <img
                            src=>
                    </a>
                </div>
                <div class="anzhuo">
                    <a href="https://api-takumi.mihoyo.com/event/download_porter/link/bh3_cn/bh3/android_gw"
                        target="_blank" class="and-btn"><img
                            src="">Android下载</a>
                </div>
                <div class="pcdownload">
                    <a href="xxxxx"><img
                            src=""></a>
                </div>
                <div class="limit">
                    <a href="xxx"><img
                            src=""></a>
                </div>
            </div>
            <div class="news">
                <div class="slid">
                    <a href="/news/25892?cate=171" target="_blank" class="news-swiper-item"><img
                            src="https://webstatic.mihoyo.com/upload/contentweb/2023/01/19/48de1edac51410a5ca115dd839294631_4211492644811939954.png">
                    </a>
                </div>
                <div class="coloum">
                    <div class="cates">
                        <div class="cate activ">
                            <a href="xxx">最新</a>
                        </div>
                        <div class="cate ">
                            <a href="xxx">动态</a>
                        </div>
                        <div class="cate ">
                            <a href="xxx">公告</a>
                        </div>
                        <div class="cate ">
                            <a href="xxx">活动</a>
                        </div>
                        <div class="cate ">
                            <a href="xxx">补给</a>
                        </div>
                    </div>
                    <div calss="annoucement">
                        <a href="https://www.bh3.com/news/10861?cate=171" class="lines">
                            <div class="tasks">
                                [ 公告 ] 《崩坏3》同人衍生作品创作指引 2.0
                            </div>
                            <div class="tasks right">
                                2021-10-13
                            </div>
                        </a>
                        <div class="divide"></div>
                        <a href="https://www.bh3.com/news/10861?cate=171" class="lines">
                            <div class="tasks">
                                [ 动态 ] V6.5作战凭证开启

                            </div>
                            <div class="tasks right">
                                2023-3-11
                            </div>
                        </a>
                        <div class="divide"></div>
                        <a href="https://www.bh3.com/news/10861?cate=171" class="lines">
                            <div class="tasks">

                                [ 动态 ] 「热砂奇遇」6.5版本更新公告

                            </div>
                            <div class="tasks right">
                                2023-3-09
                            </div>
                        </a>
                        <div class="divide"></div>
                        <a href="https://www.bh3.com/news/10861?cate=171" class="lines">
                            <div class="tasks">

                                [ 动态 ] 圣剑幽兰黛尔 | 人偶补给开启

                            </div>
                            <div class="tasks right">
                                2023-3-08
                            </div>
                        </a>
                        <div class="divide"></div>
                    </div>

                </div>
            </div>
            <div class="roller">
                <img src="./gunlun.png">
            </div>
            <div class="lookall">
                <a href="xxx"><img src="./chakanquanbu.png"></a>
            </div>
        </div>
    </div>

    <div class="box2">
        <img class="picture"
            src="https://webstatic.mihoyo.com/upload/contentweb/2023/01/18/4c4c03e6c3e928fc69442f569e349cfd_7143909417493564774.png"
            alt="米哈游">">
        <div class="box2-1">
            <p class="NAME">琪亚娜·卡斯兰娜</p>
            <p class="code">角色卡：终焉之律者</p>
            <p class="introduce">姓名：琪亚娜卡斯兰娜</p>
            <p class="introduce">装甲：终焉之律者</p>
            <p class="introduce">作战方式：双枪</p>
            <a href="xxx" class="video"><img src="./shipinfengmian.png"></a>
            <div class="btn"></div>
        </div>
        <div>
            <img class="skills" src="./juesejieshao.png">
        </div>
        <div class="LADYGOD">
            <a href="https://www.bh3.com/"><img class="ladygod1" src="./1.png"></a>
            <a href="xxx"><img class="ladygod2" src="./2.png"></a>
            <a href="xxx"><img class="ladygod3" src="./3.png"></a>
        </div>
        <div class="name">
            <span class="name1">终焉之律者</span>
            <span class="name2">起始之律者</span>
            <span class="name2">起始之律者</span>
        </div>
        <div class="search">
            <a href="https://www.bh3.com/valkyries"><img src="./chazhao.png"></a>
        </div>
    </div>
    <div class="box3">
        <img class="yayi" src="https://www.bh3.com/_nuxt/img/contract-img.09224a3.png">
        <div class="contract-wrap">
            <div clsss="tubiao">
                <a href="https://weibo.com/benghuai3" target="_blank" class="social-item">
                    <div><img
                            src=""
                            alt="米哈游"></div>
                    <div class="weibo">
                        官方微博
                    </div>
                </a>
                <a href="https://weibo.com/benghuai3" target="_blank" class="social-item">
                    <div><img
                            src=""
                            alt="米哈游"></div>
                    <div class="weibo">
                        官方微信
                    </div>
                </a>
                <a href="https://weibo.com/benghuai3" target="_blank" class="social-item">
                    <div><img
                            src=""
                            alt="米哈游">
                        <div class="weibo">客服QQ</div>
                    </div>
                </a>
                <a href="https://weibo.com/benghuai3" target="_blank" class="social-item">
                    <div><img
                            src=""
                            alt="米哈游"></div>
                    <div class="weibo">
                        官方社区
                    </div>
                </a>

            </div>
        </div>
        <div class="qqtitle">
            <p>
                <span class="hanzi"><strong>请联系我们</strong></span>
                <span class="line">---------------------------</span>
                <span class="hanzi"><strong>官方QQ群</strong></span>
                <span class="line">----------------------------------------------------</span>
            </p>
        </div>
        <div class="number1">
            <p>客服电话：400-666-6312</p>
            <p>未成年成长关爱热线：021-60371740</p>
            <p>不良信息举报热线：021-60371750</p>
            <p>投诉邮箱：tousu@mihoyo.com</p>
            <p>合作洽谈：bh3_contact@mihoyo.com</p>
        </div>
        <div class="number2">
            <p>崩坏3官方①群：579074091</p>
            <p>崩坏3官方③群：322530480</p>
            <p>崩坏3官方⑦群：486658559</p>
            <p>崩坏3官方⑧群：419960123</p>
            <p>崩坏3官方⑩群：586442980</p>
            <p>崩坏3官方⑫群：471316989</p>


        </div>
        <div class="number3">
            <p>崩坏3桌面服官方②群：872308494</p>
            <p>崩坏3桌面服官方③群：724886324</p>
        </div>
    </div>
    <div class="bot">
        <img src="./final.png" alt="" class="bot-ph">
    <div class="bot-p">
        <div class="bot-p-a">用户协议| 隐私政策| 儿童隐私政策| 自律公约| 成长关爱| 关于我们| 联系我们| 加入我们</div>
        <div>健康游戏忠告：抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。</div>

        <div>适龄提示： 本游戏适合12岁以上玩家娱乐</div>
        <div>沪公网安备31010402001116号
            |
            增值电信业务经营许可证：沪B2-20200235|</div>
        <div>沪ICP备14042301号-2 | 沪网文〔2020〕3720-270号 | 文网游备字〔2016〕Ｍ-CSG 1244 号 | 新广出审【2016】961号</div>

        <div>互联网违法不良信息举报邮箱: tousu@mihoyo.com 互联网违法不良信息举报电话: 021-60371750 （工作时间：每天10点 - 20点）</div>
        <div>亲爱的市民朋友，上海警方反诈劝阻电话“962110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听</div>
        <div>未成年成长关爱热线：021-60371740 （服务时间：8:00-23:00）</div>
        <div>© 2016 米哈游版权所有 客服电话：400-666-6312</div>
    </div>
</div>
  

</body>

</html>




</body>

</html>